<template>

  <div>
    <div class="recharge-hd">在线充值</div>
    <div class="recharge-bd">
      <el-form ref="form" label-width="100px" label-position="left" :model="formData" :rules="rules">
        <el-form-item prop="money" label="充值金额">
          <el-input @input="formData.money=formData.money.replace(/[^\d.]/g,'')" v-model="formData.money" placeholder="请输入充值金额"></el-input>
        </el-form-item>
        <el-form-item prop="configId" label="支付方式">
          <el-radio-group v-model="formData.configId" class="con-t-select-radio con-t-select">
            <el-radio :label=1><img class="con-t-alipay" src="../../../assets/static/t-07.png" />微信</el-radio>
            <el-radio :label=2><img class="con-t-alipay" src="../../../assets/static/t-06.png" />支付宝</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <!-- <div class="form-field">
                                <div class="con-t-select">
                                  <b>支付方式：</b>
                                    <el-radio-group v-model="configId" >
                                      <el-radio :label="item.id"  v-for="item,i in configIdList" :key="i"><img src="../../assets/static/ALIPAY.jpg" />{{item.title}}</el-radio>
                                    </el-radio-group>
                                        
                                </div>
                              </div> -->
      <el-button class="recharg-but" :disabled="disabled" @click="rechargBut" type="danger">确定充值</el-button>
    </div>
    <el-dialog width="400px" @open="opened" @close="close" :append-to-body='true' :destroy-on-close="true" :close-on-click-modal="false" center :title="formData.configId==2?'支付宝扫码':'微信扫码'" :visible.sync="qrCodeUrlcod">
      <div class="popup-content" v-if="!isPayStatus" v-loading="loading">
        <div>订单号：<span style="font-size: 22px;color: #e03104;font-weight: 600;">{{ordersn.out_trade_no}}</span></div>
        <div style="margin-bottom: 10px;">充值金额：<span style="font-size: 22px;color: #e03104;font-weight: 600;">{{ordersn.total_fee}}</span></div>
        <div style="margin-bottom: 10px;">风控金：<span style="font-size: 22px;color: #e03104;font-weight: 600;">{{ordersn.total_floats}}</span></div>
        <div class="qrCodeUrl" ref="qrCodeUrl" v-show="!isOut"></div>
        <div class="out" v-show="isOut">支付超时...</div>
        <div style="text-align: center; margin-top: 10px;" v-if="formData.configId==2">
          <img class="con-t-watpay" src="../../../assets/static/t-06.png" />请使用支付宝APP扫描二维码支付。
        </div>
        <div style="text-align: center; margin-top: 10px;" v-if="formData.configId==1">
          <img class="con-t-watpay" src="../../../assets/static/t-07.png" />请使用微信APP扫描二维码支付。
        </div>
      </div>
      <div class="popup-content" v-if="isPayStatus">
        <h2 style="color: #333;text-align: center;    line-height: 40px;">
          <span style="color:#DA2740;font-size:40px;vertical-align: top;" class="el-icon-success"></span>充值成功
        </h2>
        <!-- <h2 style="color: #333;text-align: center;    line-height: 40px;">
							<span style="color:#DA2740;font-size:40px;vertical-align: top;" class="el-icon-error"></span>充值失败
						</h2> -->
        <div class="particulars">
          <div class="particulars-item">
            <b>订单号：</b>
            <span>{{ordersn.out_trade_no}}</span>
          </div>
          <div class="particulars-item">
            <b>充值金额：</b>
            <span>{{ordersn.total_fee}}</span>
          </div>
          <div class="particulars-item">
            <b>风控金：</b>
            <span>{{ordersn.total_floats}}</span>
          </div>
          <div class="particulars-item">
            <b>支付方式：</b>
            <span>{{formData.configId==1?'微信':'支付宝'}}</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
  name: 'rechargeMoney',
  data () {
    return {
      disabled: false,
      qrCodeUrlcod: false,
      isPayStatus: false,
      loading: false,
      ordersn: '',
      isOut: false,
      formData: {
        money: '',
        configId: 1
      },
      rules: {
        money: [
          {
            required: true,
            message: '请输入充值金额'
          },
          {
            validator: function (rule, value, callback) {
              if (value <= 0) {
                callback(new Error('充值金额需大于0'))
              } else {
                callback()
              }
            }
          }
        ],
        configId: [
          {
            required: true,
            message: '请选择支付方式'
          }
        ]
      }
    }
  },
  computed: {},

  mounted () {},
  methods: {
    rechargBut () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.disabled = true
          this.qrCodeUrlcod = true
        } else {
          return false
        }
      })
    },
    creatQrCode (url) {
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: url, // 需要转换为二维码的内容
        width: 350,
        height: 350,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    queryByOrderSn (e) {
      clearInterval(this.time)
      let self = this
      let index = 1
      this.time = setInterval(function () {
        self.$apis
          .queryByOrderSn({
            ordersn: e
          })
          .then(res => {
            index++
            if (index > 600) {
              clearInterval(self.time)
              self.isOut = true
            } else {
              if (res.data.data == 201) {
                self.isPayStatus = true
                self.getInfo()
                clearInterval(self.time)
              } else {
                this.isPayStatus = false
              }
            }
          })
      }, 1000)
    },
    generateOrder () {
      // {’messageType’:’订单类型 1余额充值 2购买素材’,’pirce’:’金额’,’numbers’:’数量’,’goodsid’:’商品id’,’payType’:’支付类型wx/zfb’,’configId’:’支付通道ID’}
      let query = {
        messageType: 2,
        pirce: this.formData.money,
        payType: 'jf',
        configId: this.formData.configId,
        numbers: 1
      }
      this.loading = true
      this.$apis.generateOrder(query).then(res => {
        if (res.data.errno == 0) {
          this.createNative(res.data.data.orderSn)
        } else {
          this.$message.error('创建订单失败')
          this.qrCodeUrlcod = false
        }
        this.disabled = false
      })
    },
    createNative (e) {
      this.$apis.createNative({ ordersn: e }).then(res => {
        if (res.data.errno == 0) {
          this.ordersn = res.data.data
          this.creatQrCode(res.data.data.code_url)
          this.queryByOrderSn(res.data.data.out_trade_no)
        } else {
          this.$message.error('创建二维码失败')
          this.qrCodeUrlcod = false
        }
        this.disabled = false
        this.loading = false
      })
    },
    opened () {
      this.generateOrder()
    },
    close () {
      this.disabled = false
      this.isPayStatus = false
      this.ordersn = ''
      clearInterval(this.time)
    }
  }
}
</script>

<style lang="less" scoped>
.con-t-select {
  margin-top: 0px;
}
.content {
  display: flex;
  min-height: 100vh;
}
.myorderform {
  flex: 1;
  background-color: #fafafa;
}
.myset {
  text-align: center;
  padding: 70px 20px 50px;
  font-size: 16px;
  img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin-bottom: 10px;
  }
  div {
    span {
      color: #d1483f;
    }
  }
}
.myorderform-title {
  font-size: 18px;
  margin-bottom: 30px;
  text-align: center;
}
.goodsbuy {
  padding: 15px 0px;
  color: #828282;
  font-size: 18px;
  cursor: pointer;
  text-align: center;
}
.goodsbuyatv {
  border-left: 4px solid #d82141;
  background-color: #fff;
}
.orderform {
  background-color: #fff;
  padding: 60px 40px;
  flex: 4;
  box-sizing: border-box;
}
.allorders {
  display: flex;
  margin-bottom: 20px;
}
.cancellation-order {
  border-right: 2px solid #ddd;
  padding: 0px 30px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
}
.cancellation-active {
  color: #d82141;
}
.cancellation-order:last-child {
  border: none;
}
.cancellation-order:first-child {
  padding-left: 0;
}
.uni-input {
  border: 1px solid #e4e4e4;
  width: 30%;
  border-radius: 10px;
  padding: 10px 0;
  padding-left: 20px;
  margin-bottom: 40px;
}
.indent-select {
  display: flex;
  .uni-data-select {
    margin-right: 10px;
  }
  img {
    width: 80px;
    height: 60px;
  }
}
.uni-stat__select {
  margin-right: 40px;
  margin-bottom: 40px;
}
.seedetails {
  color: #fff;
  background: linear-gradient(#d82141, #f36638);
}

.recharge-hd {
  border-left: 3px solid #d82141;
  padding: 2px 10px;
  margin-bottom: 30px;
}
.recharge-bd {
  width: 500px;
  margin-left: 150px;
}

.recharg-but {
  margin-left: 100px;
  margin-top: 20px;
}
</style>